<template>
  <view class="points-actions-container">
    <view class="action-item" v-for="action in actions" :key="action.id" @click="handleAction(action)">
      <view class="action-icon">{{ action.icon }}</view>
      <view class="action-info">
        <text class="action-title">{{ action.title }}</text>
        <text class="action-desc">{{ action.description }}</text>
        <text class="action-reward">+{{ action.reward }}积分</text>
      </view>
      <view class="action-status">
        <text v-if="action.completed" class="status-completed">✓</text>
        <text v-else class="status-available">{{ action.statusText }}</text>
      </view>
    </view>
    
    <!-- 签到成功弹窗 -->
    <ToastNotification 
      :visible="showCheckInSuccess" 
      title="签到成功"
      :message="`+${checkInPoints} 积分`"
      type="success"
      icon="✨"
      @close="showCheckInSuccess = false"
    />
  </view>
</template>

<script>
import pointsManager from '@/utils/points-manager.js'
import toastHelper from '@/utils/toast-helper.js'
import ToastNotification from '@/components/ToastNotification.vue'

export default {
  name: 'PointsActions',
  components: {
    ToastNotification
  },
  props: {
    actions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showCheckInSuccess: false,
      checkInPoints: 0
    }
  },
  methods: {
    handleAction(action) {
      if (action.completed) {
        toastHelper.showToast({
          title: action.completedText || '已完成',
          icon: 'none'
        })
        return
      }
      
      switch (action.type) {
        case 'checkin':
          this.handleCheckIn(action)
          break
        case 'gameTime':
          this.handleGameTimeReward(action)
          break
        case 'achievement':
          this.handleAchievementReward(action)
          break
        case 'share':
          this.handleShare(action)
          break
        case 'ad':
          this.handleWatchAd(action)
          break
        case 'task':
          this.handleTask(action)
          break
        default:
          this.handleCustomAction(action)
      }
    },
    
    // 处理签到
    handleCheckIn(action) {
      // 检查登录状态
      const token = uni.getStorageSync('user_token')
      if (!token) {
        toastHelper.showError('请先登录后再签到')
        return
      }
      
      const hasCheckedIn = pointsManager.getCheckInStatus()
      if (hasCheckedIn) {
        toastHelper.showError('今日已签到')
        return
      }
      
      pointsManager.setCheckInStatus(true)
      pointsManager.addPoints(action.reward, action.title)
      
      // 显示签到成功弹窗
      this.showCheckInSuccess = true
      this.checkInPoints = action.reward
      
      this.$emit('pointsChanged')
    },
    
    // 处理游戏时长奖励
    handleGameTimeReward(action) {
      // 模拟检查游戏时长
      const gameHours = 2.5
      const rewardPoints = Math.floor(gameHours) * action.reward
      
      if (rewardPoints > 0) {
        pointsManager.addPoints(rewardPoints, action.title)
        toastHelper.showSuccess(`获得${rewardPoints}积分`)
        this.$emit('pointsChanged')
      } else {
        toastHelper.showError('游戏时长不足')
      }
    },
    
    // 处理成就奖励
    handleAchievementReward(action) {
      const hasNewAchievement = true // 模拟有新成就
      
      if (hasNewAchievement) {
        pointsManager.addPoints(action.reward, action.title)
        toastHelper.showSuccess(`获得${action.reward}积分`)
        this.$emit('pointsChanged')
      } else {
        toastHelper.showError('暂无新成就')
      }
    },
    
    // 处理分享
    handleShare(action) {
      uni.showActionSheet({
        itemList: ['分享到微信', '分享到QQ', '复制邀请链接'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.performShare('wechat', action)
          } else if (res.tapIndex === 1) {
            this.performShare('qq', action)
          } else if (res.tapIndex === 2) {
            this.copyInviteLink()
          }
        }
      })
    },
    
    // 执行分享
    performShare(platform, action) {
      setTimeout(() => {
        pointsManager.addPoints(action.reward, action.title)
        toastHelper.showSuccess('分享成功')
        this.$emit('pointsChanged')
      }, 1000)
    },
    
    // 复制邀请链接
    copyInviteLink() {
      const inviteLink = 'https://moe-web.com/invite?code=USER123'
      uni.setClipboardData({
        data: inviteLink,
        success: () => {
          toastHelper.showSuccess('邀请链接已复制')
        }
      })
    },
    
    // 处理观看广告
    handleWatchAd(action) {
      uni.showModal({
        title: '观看广告',
        content: '观看30秒广告视频，获得积分奖励',
        success: (res) => {
          if (res.confirm) {
            setTimeout(() => {
              pointsManager.addPoints(action.reward, action.title)
              toastHelper.showSuccess('观看完成')
              this.$emit('pointsChanged')
            }, 2000)
          }
        }
      })
    },
    
    // 处理任务
    handleTask(action) {
      uni.navigateTo({
        url: '/pages/points/tasks/tasks',
        fail: () => {
          toastHelper.showError('任务页面开发中')
        }
      })
    },
    
    // 处理自定义操作
    handleCustomAction(action) {
      if (action.handler && typeof action.handler === 'function') {
        action.handler()
      } else {
        toastHelper.showError('功能开发中')
      }
    }
  }
}
</script>

<style scoped>
.points-actions-container {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 25rpx;
  background: #f8f9fa;
  border-radius: 15rpx;
  transition: all 0.3s ease;
}

.action-item:active {
  transform: scale(0.98);
}

.action-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.action-info {
  flex: 1;
}

.action-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.action-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.action-reward {
  font-size: 22rpx;
  color: #4caf50;
  font-weight: bold;
}

.action-status {
  text-align: right;
}

.status-completed {
  color: #4caf50;
  font-weight: bold;
  font-size: 24rpx;
}

.status-available {
  color: #667eea;
  font-size: 24rpx;
  font-weight: bold;
}
</style>
